我该如何使用 JQuery 在<td>标签内添加<br>标签?

3
在我的<td>标签中,有几个-.。我想做的是,在这个特定单词前面加上<br>标签。 我使用了replace()函数,但它只更改了一个-.。如何找到所有的-.实例?

原始文本

Lorem Ipsum is simply dummy text of the printing and typesetting industry. -.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. -.It has survived not only five centuries, but also the leap into electronic typesetting.

我想要的

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

-. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

-. It has survived not only five centuries, but also the leap into electronic typesetting.

这是我的代码示例

<table class="Notice">
    <thead>
        <tr>
            <th>Name</th>
            <th>Number</th>
        </tr>
    <thead>
    <tbody>
        <tr>
            <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. -.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. -.It has survived not only five centuries, but also the leap into electronic typesetting.</td>
        </tr>
    </tbody>
</table>

Javascript

$('td:contains("-.")').html(function (i, htm) {
    return htm.replace(/-./g, "<br>-.");
});

解决方案

我发现我的错误 - 我没有处理“每个”单词。因此,我使用了each()函数,它完美地运行!

$('td:contains("-.")').each(function () {
    $(this).html($(this).html().replace(/-./g, "<br>-."));
});

重复的问题,参考链接:https://dev59.com/Z2Yr5IYBdhLWcg3wkK-w#13574989 - Mox Shah
你想替换还是在前面添加? - Guruprasad J Rao
@candle 我加上了! :) 这种方式只适用于一个 -. 部分。 - naanace
尝试使用此处的replaceAll函数: https://dev59.com/K3M_5IYBdhLWcg3w-4rw#1137579 - candle
显示剩余2条评论
3个回答

3

使用JavaScript replace() 函数进行全局匹配。

replace(/-/g,"<br />-");

谢谢 :) 但那个函数只是针对一个 -.。最终我使用了 each() 函数自己解决了。$('td:contains("-.")').each(function () { $(this).html($(this).html().replace(/-./g, "<br>-.")); }); 这个方法可以! - naanace

2

试试这个:

<!DOCTYPE html>
<html>
<body>

<p>Click the button</p>

<p id="demo">Lorem Ipsum is simply dummy text of the printing and typesetting industry. -.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. -.It has survived not only five centuries, but also the leap into electronic typesetting.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var text = document.getElementById("demo").innerHTML; 
    text = text.replace(new RegExp("-.","g"), "<br>-.");
    document.getElementById("demo").innerHTML = text ;
}
</script>

</body>
</html>

谢谢你的帮助,@candle :) 当我使用按钮时,我可以进行调整。 - naanace
@naanace 没问题。你也谢谢。 - candle

0

JavaScript

<p id="changeMe"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. -.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. -.It has survived not only five centuries, but also the leap into electronic typesetting.</p>
 <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0.min.js"></script> -->
<script>
 
 var p = document.getElementById("changeMe");
 p.innerHTML = p.innerHTML.replace(/-./g, "<br>-. ");
 </script>


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接