是否可以使用JS正则表达式向HTML添加格式

Question

是否可以使用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与/ ^ /匹配）

Answer 1

使用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>

这是在香草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。

---

关于您的特定请求，如果您坚持使用regex，请尝试

• 找到相关子字符串的开始和结束位置，并
• 使用整齐的功能将所选文本与您选择的标签一起包装。

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

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>

此示例包含许多螺母和螺栓。请询问您是否需要特定说明。