我想换。和<br>使用javascript标记

Question

我试过这个

<html>
<head>
<title>None</title>
</head>
<body>
<p id="text">just some random text. random text</p>
<button type="button" onclick="strReplace();">Replace</button>

<script>
 function strReplace(){
        var myStr = document.getElementById("text");
        var mySte = myStr.textContent;
        console.log(mySte);
</script>

</body>

我想要以下结果

只是一些随机文本
随机文本

Answer 1

您可以使用此正则表达式在不破坏 html 的情况下查找和替换字符串： /(?!<[^>]+)\\.(?![^<]+>)/g

 [myattr] { background-color: pink; } [myattr]:after { content: "this element's attribute is: " attr(myattr); background-color: lightgreen; margin: 1em; } p > span { background-color: lightblue; }

 <html> <head> <title>None</title> </head> <body> <p id="text">just some. random text. <span myattr="text.with.dots">nested.html</span> end. <span>i < 40. But i is also > 30. What are valid values of i?</span> </p> <button type="button" onclick="strReplace();">Replace</button> <script> function strReplace(){ var myStr = document.getElementById("text"); myStr.innerHTML = myStr.innerHTML.replace(/(?!<[^>]+)\\.(?![^<]+>)/g, "<br>"); console.log(myStr.innerHTML); } </script> </body>

Answer 2

直接回答问题：

var outputHtml = inputText.replace(/\./g, '<br />');

默认情况下， Javascript 替换方法将替换某些内容的第一个实例（在本例中为第一个 .），因此g正则表达式修饰符告诉它替换所有内容。 \\. 在正则表达式中是因为. 是正则表达式中的特殊字符。 这将替换文本中的每个点。

省略号呢？

这种技术不适用于包含文字省略号的文本，如下所示：

Hello world...

如果您的文本可能包含此内容，并且您希望忽略该内容，则以下正则表达式更合适：

/[^\.](\.)[^\.]/g

这将匹配任何. 没有被其他.

var outputHtml = inputText.replace(/[^\.](\.)[^\.]/g, '<br />');

处理 HTML

在这里的问题中，输入实际上来自 DOM。 我们无法替代。 在其innerHTML 上，因为它也会替换HTML 标签内的内容。 因此，如果您的输入文本来自这样的 DOM（而不是文本区域），那么最安全的方法是仅将替换应用于文本节点。 这是这样做的：

 document.getElementById("start").addEventListener("click", () => { var inputNode = document.getElementById("text"); replace(inputNode); }); function replace(node) { if(!node) { return; } if (node.nodeName == '#text') { // We've found a text node. Apply the regex to it now. // Note that you can use either of the above regexes here. var inputText = node.textContent; var lines = inputText.split(/\\./g); if(lines.length > 1) { // It had at least one dot in it. // Swap in this new set, each with a <br /> between them. var parent = node.parentNode; var nextSibling = node.nextSibling; parent.removeChild(node); lines.forEach((line, i) => { if(i != 0){ // insert the <br> var br = document.createElement('br'); parent.insertBefore(br, nextSibling); } var textNode = document.createTextNode(line); parent.insertBefore(textNode, nextSibling); }); } } else { // Loop through each child node. // We go backwards such that completed replacements don't affect the loop. for(var i=node.childNodes.length - 1; i>=0; i--) { replace(node.childNodes[i]); } } }

 <html> <head> <title>None</title> </head> <body> <p id="text">just some random text. random text</p> <button type="button" id="start">Replace</button> </body> </html>

如果您从浏览器中的 HTML 字符串开始，则可以使用上述替换方法和浏览器内部解析来安全地仅影响实际文本：

function replaceHtmlString(html) {
    var div = document.createElement('div');
    div.innerHTML = html;
    replace(div);
    return div.innerHTML;
}

我想换。和<br>使用javascript标记

问题描述

2 个解决方案

解决方案1
1 已采纳 2021-07-24 14:31:40

解决方案2
0 2021-07-24 16:17:21

省略号呢？

处理 HTML

我想换。 和<br>使用javascript标记

问题描述

2 个解决方案

解决方案1 1 已采纳 2021-07-24 14:31:40

解决方案2 0 2021-07-24 16:17:21

省略号呢？

处理 HTML

我想换。和<br>使用javascript标记

解决方案1
1 已采纳 2021-07-24 14:31:40

解决方案2
0 2021-07-24 16:17:21