替换字符串中的 html 标记，但保留文本并用自定义标记重新换行

Posted 2023-05-07

【中文标题】替换字符串中的 html 标记，但保留文本并用自定义标记重新换行

【英文标题】：Replace html tag inside a string but keep text and re-wrap with custom tag

【发布时间】：2014-01-31 14:10:52

【问题描述】：

我知道如何使用 replace 和 replaceWith，但我需要做一些不同的事情。

示例字符串：

<span class="highlight_grey">example:</span> some additional text   
& <span class="highlight_grey">again...</span> and to wrap up some 
regular <span>span.. no class here</span>

想要的结果：

[highlight color="default"]example:[/highlight] some additional text   
& [highlight color="default"]again...[/highlight] and to wrap up some   
regular <span>span.. no class here</span>

element.replace 在这里不起作用，因为我需要替换整个换行并保留文本。replaceWith 也对我没有帮助，因为我需要使用字符串并且我再次替换 包装元素。

感谢您的帮助

【参考方案1】：

编辑：抱歉，我没有注意到字符串的其余部分。无论如何：

http://jsfiddle.net/WJTb7/4/

html：

<div id="test">
<span class="highlight_grey">example:</span> some additional text & <span class="highlight_grey">again...</span>
</div>

和 JS：

var oldHtml = document.getElementById('test').innerHTML,
    newHtml;

newHtml = oldHtml.replace(/<span class="highlight_grey">(.*?)<\/span>/gi, '[highlight color="default"]$1[/highlight]')

alert(newHtml);

【讨论】：

在第二次替换中，您正在替换不相关的结束跨度标签...滚动示例（也许我应该将其分成几行？）..我只需要定位所需的跨度...这就是为什么我写了“保留内部文本”.. 无论如何，谢谢你的帮助。

抱歉，我没有注意到您输入的其他内容 :) 现在已修复。

效果很好！非常感谢...将学习如何使用“（。*？）”作为变量（如何调用？有节省时间的提示吗？）。无论如何，非常感谢。

这是一个正则表达式 - 正则表达式。我建议使用gskinner.com/RegExr :)

【参考方案2】：

这个例子看起来很重，我敢打赌它可以简化为一个更美化的版本。 Lordex's 更加精简。我捕获了跨度。可能不需要。

// of course, for txt - you'd just use document.getElementById('test').innerHTML,
var txt = '<span class="highlight_grey">example:</span> some additional text & <span class="highlight_grey">again...</span><span> .. MORE SPAN TEXT </span>'


 txt.replace(/(\<span class="highlight_grey"\>)(.*?)(\<\/span>)/g,function(_,$1,$2,$3) return '[highlight color="default"]' + $2 + '[/highlight]';

)

// output
// "[highlight color="default"]example:[/highlight] some additional text & [highlight color="default"]again...[/highlight]<span> .. MORE SPAN TEXT </span>"

【讨论】：

感谢您的帮助，那个人是第一个来的；）但谢谢我。