javascript - 是否可以使用 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>

下面是在 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 .

<小时/>

关于您的具体要求，如果您坚持使用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>

此示例包含大量具体细节。请询问您是否需要对特定内容进行解释。