是否可以使用JS正则表达式为html添加格式

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (151)

是否可以使用JS为html添加格式(可以在Office编辑器中轻松完成)?

这就是我想要做的:

let htmString = "<p>baz foobar</p><p>foo<i>bar</i></p>";
let reg = RegExp( "^fooba", "g" );
let htmModified = myFunction( htmString, reg, ["<u>", "<\/u>"] );
console.log( htmModified );

输出:

<p>baz foobar</p><p><u>foo</u><i><u>ba</u>r<i/></p>

(后面<p>被解释为一行的开头,因此只有第二个foobar匹配/ ^ /)

提问于
用户回答回答于

这可以使用CSS(或XPath)选择器和一些JavaScript轻松完成。为了使事情更容易,将jQuery放入混合中,以获得对类似方法的访问.wrapInner

$("p:nth-child(2)").wrapInner("<u></u>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<test>
<p>baz foobar</p><p>foo<i>bar</i></p>
</test>

这是一个在vanilla JS中使用CSS查询选择器的示例:

var wrapper = document.createElement("u");
var parent = document.querySelector("p:nth-child(2)");
var div = parent.appendChild(wrapper);
while(parent.firstChild !== wrapper)
    wrapper.appendChild(parent.firstChild);

<p>baz foobar</p><p>foo<i>bar</i></p>

为了加快速度,这里有一个很好的介绍:JavaScript HTML DOM ,这里是一个非常好的和有趣的CSS选择器介绍:CSS Diner

关于您的具体要求,如果您坚持使用正则表达式,请尝试

  • 找到有问题的子串的起始位置和结束位置
  • 使用一个简洁的函数用您选择的标签包装选定的文本。

为了使事情更有趣,我搜索一个子字符串,该子字符串不从HTML片段开始所选文本的位置0。CustomWrapper如果您愿意,只需更改正则表达式模式或将0作为起始索引传递给函数。

function CustomWrapper(ele, start, end, wrapper) {
  var len = ele.html().length;
  var selectedText = ele.html().substring(start, end);
  var replacement = '<'+wrapper+'>'+selectedText+'</'+wrapper+'>';
  ele.html(ele.html().substring(0, start) + replacement + ele.html().substring(end, len));
}

var secondEle = $("p:nth-child(2)");
 console.log(secondEle.html());
var re = /<i>ba/g;
match = re.exec(secondEle.html());
 console.log(match.index + '-' + re.lastIndex);
CustomWrapper(secondEle, match.index, re.lastIndex, 'u');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<test>
<p>baz foobar</p><p>foo<i>bar</i></p>
</test>

这个样本包含很多螺母和螺栓。请询问您是否需要特定的解释。

扫码关注云+社区

领取腾讯云代金券