字符串的粗体部分/向变量添加样式[重复]答案

【问题标题】：Bold part of a string / Add styles to a variable [duplicate]字符串的粗体部分/向变量添加样式[重复]
【发布时间】：2016-11-15 20:29:57
【问题描述】：

我只需要加粗这个字符串中的日期。

 <div class="foo"><p> Click here now and get by January 1st </p></div>

我能够提取日期并为其创建一个变量

 var fullMessage =  $('.foo p').text();
 var justTheDate = fullMessage.substring(fullMessage.indexOf('get by') + 7);

但我不能加粗我创建的子字符串/变量。我希望这样的事情会起作用：

 $(justTheDate).css("font-weight","700");

这可能吗？

【问题讨论】：

从您提出问题的方式来看，您正在处理一个已经呈现的 html 页面。

标签： javascript jquery css variables substring

【解决方案1】：

希望对你有帮助：

var element = $('.foo p'),
    fullMessage =  element.text(),
    justTheDate = fullMessage.substring(fullMessage.indexOf('get by') + 7),
    boldIt = '<span style="font-weight: 700">' + justTheDate + '</span>',
    newHtml = fullMessage.replace(justTheDate, boldIt);

    element.html(newHtml)

Fiddle demo

【讨论】：

【解决方案2】：

不知道为什么不能简单地将日期部分包装在一个强标签中？

如果日期是动态填充的，比如通过变量，你可以在你的 p 标签内有一个 span 标签的占位符和一个类。

作为<span class="date"></span>

将您的日期值注入该标签，然后简单地将 css 应用于该标签。

span.date{font-weight: 600;}.

【讨论】：

【解决方案3】：

假设日期在末尾，您可以使用 jquery（或常规 javascript）创建一个跨度，并使用 append 或 appendChild 将其添加到 p 标签。

var fullMessage =  $('.foo p')
var justTheDate = fullMessage.substring(fullMessage.text().indexOf('get by') + 7);
fullMessage.append('<span class="date">' + justTheDate + '</span>');

~~将它放在一个跨度中并使用一个类来处理该部分的 css。~~

<style>
    .date {
        font-weight: 700;
    }
</style>
<div class="foo"><p> Click here now and get by <span class="date">January 1st</span></p></div>

【讨论】：

OP 询问如何添加它.... 不直接在 HTML 中添加它。
相信我，如果可以的话，我会这样做的！数据就是这样返回给我的。