如何移除data-original-title中的<br>？现有JS代码出现类型错误

为啥之前的代码报错？ #

你写的JS代码报错，是因为部分abbr.small元素根本没设置data-original-title属性，导致$(this).attr('data-original-title')返回undefined，这时调用replace方法自然会触发类型错误。而且你之前的代码错误地修改了元素的文本内容，而不是目标属性data-original-title，这也达不到需求。

可行的解决方法 #

修正后的jQuery代码 #

给每个元素做属性存在性判断，确保只有存在data-original-title的元素才会被处理，同时直接修改目标属性：

$('abbr.small').each(function() {
  const title = $(this).attr('data-original-title');
  if (title) {
    // 正则匹配所有<br>变体，比如<br/>、<br />
    $(this).attr('data-original-title', title.replace(/<br\s*\/?>/gi, ''));
  }
});

原生JS写法（不用jQuery） #

如果页面没引入jQuery，用原生JS也能实现：

document.querySelectorAll('abbr.small').forEach(el => {
  const title = el.getAttribute('data-original-title');
  if (title) {
    el.setAttribute('data-original-title', title.replace(/<br\s*\/?>/gi, ''));
  }
});

CSS的局限性 #

CSS没法直接修改HTML属性值，只能对伪元素的content做简单样式处理，没法过滤掉属性里的<br>标签。如果JS执行时机有问题，只能用CSS应急（比如强制不换行），但这没法彻底解决问题：

abbr.small::after {
  content: attr(data-original-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

优先推荐用JS方案直接修改属性值，这是最彻底的解决办法。

内容的提问来源于stack exchange，提问作者Daniel Herrmann