Question

我需要使用span标记和换行符替换站点标题中的短划线以打破两行标题。不幸的是我无法在PHP中执行此操作：（

以下陈述似乎是这样做的。虽然有错误，因为它会对整个页面中的角色进行更改。

document.body.innerHTML = document.body.innerHTML.replace(/\u2013/g, "</span><br /><span>");

我在下面尝试过的jQuery解决方案有效，但有时该元素会隐藏在元素上的可见性！

$("#events h3 a").each(function() {
  $(this).html($(this).html().replace(/\u2013/g,"</span><br /><span>"));
});

理想情况下，我想使用上面的纯JavaScript版本，但需要帮助导航到事件链接。

#events h3 a

感谢任何可以提供帮助的人，我到处寻求解决方案。

这是页面结构的一个示例。并解释了为什么跨度关闭和开始在代码摘录中回到前面。这样就可以在不同的线条上设置每一半的样式。

<ul id="events">
    <li>
        <h3>
            <a href="http://example.com">
                <span>First Events Title - On Every Sunday</span>
            </a>
        </h3>
    </li>
    <li>
        <h3>
            <a href="http://example.com">
                <span>Second Events Title - On Every Monday</span>
            </a>
        </h3>
  </li>
</ul>

Answer 1

document.getElementById('events').innerHTML

Answer 2

我不确定你为什么要在你的正则表达式中进行特殊编码（也许是我缺少的东西）。无论如何，this有效

$("#events h3 a span").each(function() {
  $(this).html($(this).html().replace("-","</span><br /><span>"));
});

Answer 3

尝试使用u002d代替u2013。

$("#events h3 a").each(function() {
  $(this)
      .html($(this)
                .html()
                .replace(/\u002d/g, "<span /><br /><span>"));
});

updated JavaScript code

<强>更新

有趣的是，u002d指的是ASCII连字符，u2013指的是短划线。看起来“ - ”是seen as the ASCII hyphen，而不是短划线。老实说，这看起来很混乱，因为它们看起来很相似：-S。

这是一个web page，用于常用混淆的特殊字符，如连字符和短划线。

所以，我已经更新了代码，在html中用“＆amp;＃x2013”[SO清理我的条目:)替换了“ - ”，它将按预期工作。

<ul id="events">
    <li>
        <h3>
            <a href="http://example.com">
                <span>First Events Title &#x2013 On Every Sunday</span>
            </a>
        </h3>
    </li>
    <li>
        <h3>
            <a href="http://example.com">
                <span>Second Events Title &#x2013 On Every Monday</span>
            </a>
        </h3>
  </li>
</ul>

Unicode version

或者，您可以使用“＆amp; ndash;” [再次，SO消毒我的条目]而不是Unicode形式

<ul id="events">
    <li>
        <h3>
            <a href="http://example.com">
                <span>First Events Title &ndash; On Every Sunday</span>
            </a>
        </h3>
    </li>
    <li>
        <h3>
            <a href="http://example.com">
                <span>Second Events Title &ndash; On Every Monday</span>
            </a>
        </h3>
  </li>
</ul>

ndash'ed version

Answer 4

看起来很简单，这是一个技巧问题吗？如果它像我想的那样简单，试试这个。

$(function () {
    $("#events h3 a").each(function () {
        $(this).html($(this).html().split(" - ").join("</span><br/><span>"));
    });
});

Answer 5

这是一种JavaScript方法

jsfiddle

var replaceDashes = function() {
    var body = document.getElementsByTagName('body')[0];
    // copied an &ndash; character to use in the replace
    body.innerHTML = body.innerHTML.replace(/ – /g, '</span><br /><span>');
};
replaceDashes();

替换 - 使用Javascript或JQuery的字符

5 个答案: