gpt4 book ai didi

javascript - 用

转载 作者:技术小花猫 更新时间:2023-10-29 11:53:27 26 4
gpt4 key购买 nike

让我们假设以下元素(查找尾随空格和前导空格):

<p>
<span class="item">Lorem Ipsum is simply dummy text </span><span class="item">of the printing and typesetting</span><span class="item"> industry.</span>
</p>

我想用 &nbsp; 替换所有空格, 由于 display: inline-block此处显示的奇怪行为:http://jsfiddle.net/SQuUZ/ (我不知道所有浏览器,但最新的 Chrome 和 Firefox 都一样)。

现在,既然 javascript 是这里的一个选项,jQuery 也是,我可以:

$('p').text($('p').text().replace(/ /g, '&nbsp;'));

但它转义了 &nbsp;结果变成a&nbsp;mess&nbsp;of&nbsp;entities .

显然,为此我们可以使用 $('p').html() :

$('p').html($('p').html().replace(/ /g, '&nbsp;'));

但是这个更糟,因为它还添加了&nbsp;在标签本身内:

<p>
<span&nbsp;class="item">Lorem&nbsp;Ipsum&nbsp;is&nbsp;simply&nbsp;dummy&nbsp;text&nbsp;</span><span&nbsp;class="item">of&nbsp;the&nbsp;printing&nbsp;and&nbsp;typesetting</span><span&nbsp;class="item">&nbsp;industry.</span>
</p>

<!-- TL;DR -->
<span&nbsp;class="item"></span> <!-- is actually invalid... -->

它打破了一切......

注意事项:

  • 不会只有<span>item 的元素在容器内(也可能不总是 <p> )。
  • 慢速正则表达式是一个选项(问题是,我想不出一个...)。

我在这里有什么选择?

更新:

事实上,谁能解释为什么多行/单行会出现这样的错误 display: inline-block; ? (参见上面的 fiddle 链接,并检查...)

问题已迁移至 display: inline-block; weird spacing behavior

最佳答案

$('p').contents().filter(function(){
return this.nodeType == 3 // Text node
}).each(function(){
this.data = this.data.replace(/ /g, '\u00a0');
});

DEMO

关于javascript - 用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10474124/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com