替换 html 字符串中两个标签之间的文本 - Javascript RegEx?[关闭]

Replace text between two tags within html string - Javascript RegEx? [closed]

提问人:Marc Sanders 提问时间:11/4/2023 最后编辑:Marc Sanders 更新时间:11/4/2023 访问量:80

问:


想改进这个问题吗?更新问题,使其仅通过编辑这篇文章来关注一个问题。

16天前关闭。

我有一个包含 html 的字符串,该字符串是从 Wix Studio 输出的。我正在尝试操纵并放回原始标签中。到目前为止,我已经设法剥离了标签并操作了字符串(将每个字母包装在一个 中),但我无法弄清楚如何将操纵的字符串(内部)放回原始标签中,期望的结果如下。不会总是,可以通过,可能是一个 - 无法使用jQuery!<h1><h2><h6><p>

// Get string from Wix using the Wix Editor Elements ($w) APIs)
var html = $w('Text').html;

var string = html.replace(/(<([^>]+)>)/ig, ''), 
    wrap = string.replace(/\w/g, "<span>$&</span>");

html返回 ✅ 一切正常"<h1 class="wixui-rich-text__text">Add a Title</h1>"

string返回 ✅ 一切正常"Add a Title"

wrap返回 ✅ 一切正常"<span>A</span><span>d</span><span>d</span> <span>a</span> <span>T</span><span>i</span><span>t</span><span>l</span><span>e</span>"

期望的结果:

原始 html 标记,其中包含修改后的内容:

output返回"<h1 class="wixui-rich-text__text"><span>A</span><span>d</span><span>d</span> <span>a</span> <span>T</span><span>i</span><span>t</span><span>l</span><span>e</span></h1>"

有点超出我的深度,可能是一个更好的方法。

非常感谢!

参考文献:https://www.wix.com/velo/reference/$w/text/html

JavaScript HTML 正则表达式 标签 velo

评论

2赞 Barmar 11/4/2023
最好避免使用正则表达式处理 HTML。将其解析为 DOM 对象并对其进行修改。
0赞 Marc Sanders 11/4/2023
这是有道理的,但我不确定使用 Wix 提供的 JavaScript api 是否可以做到这一点?
1赞 Barmar 11/4/2023
JavaScript 有一个内置的 HTML 解析器。
1赞 James 11/4/2023
像这样的东西 ?let output = html.replace(string, wrap);
0赞 Marc Sanders 11/4/2023
这是正确的@Yogi,如果您有任何指示,我没有偶然发现这一点,谢谢

答:

0赞 Hatem 11/4/2023 #1

更好的方法是将其解析为 DOM 并对其进行操作

const html = '<h1 class="wixui-rich-text__text">Add a Title</h1>';
const fragment = new DocumentFragment();
const wrapper = document.createElement('div');
wrapper.innerHTML = html;
fragment.append(wrapper);
const el = fragment.firstChild.firstChild;
const content = el.innerHTML;
el.innerHTML = content.split('').map(c => `<span>${c}</span>`).join('');
const modifiedHtml = el.outerHTML;
console.log(modifiedHtml);

0赞 ray 11/4/2023 #2

我认为这将适合您的需求:

html.replace(/(?<=(<([^>]+)>[^<>]*))\w/ig, '<span>$&</span>');

测试输入字符串:

<div><h1 class="wixui-rich-text__text">Add a Title</h1><p>Test <b>Again</b></p></div>

输出字符串:

<div><h1 class="wixui-rich-text__text"><span>A</span><span>d</span><span>d</span> <span>a</span> <span>T</span><span>i</span><span>t</span><span>l</span><span>e</span></h1><p><span>T</span><span>e</span><span>s</span><span>t</span> <b><span>A</span><span>g</span><span>a</span><span>i</span><span>n</span></b></p></div>

评论

0赞 Marc Sanders 11/5/2023
太好了,谢谢@ray