是否可以使用JS regexes将格式添加到html
是否可以使用JS regexes将格式添加到html
提问于 2018-09-03 03:24:15
是否可以使用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匹配/^/)
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-03 05:52:48
使用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>
这个样品包含了很多细节。如果你需要一些具体的解释，请询问。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52140330
复制相关文章
相似问题