如何为字符串的第一个字符设置样式?

时间:2019-01-17 18:21:19

标签: javascript jquery css

我无法控制此项目中的HTML,因此一切都必须使用JavaScript / Jquery完成。

我有多个来自服务器的页面。其中一些表的页脚带有脚注。这些脚注的第一个字符是*或†

有时页面将有多个表。

我不能使用:: first-letter,因为它会选择符号和第一个字母。我需要填充仅在符号的右侧

我需要在这些字符的右侧添加填充以将其与文本分开。

我已经成功获得了符号。如您在我的代码中看到的,我选择了一个类,在该类中找到了跨度,获取了文本,并将其转换为子字符串。 然后,我得到每个字符的第一个字符,当我console.log我的结果时,我看到了符号。 我现在正尝试使用某种内联样式将它们包装在一个范围内,但是我得到了一个“ jquery-2.1.4.min.js:3 Uncaught DOMException:无法在'Node'上执行'insertBefore':仅一个元素允许。”错误。

HTML代码是在xsl文档中生成的,但这是从检查器中提取的表格页脚:

<div class="article-table-descriptions" style="width: 100%;">
    <span id="tblfn4">*footer text.</span>
    <span id="tblfn5">†footer text.</span>
</div>

$(document).ready(function () {

let chars;
let tableFooterSpans = $('.article-table-descriptions').find('span').text().split('.');

$(tableFooterSpans).each(function(i, str){
    chars = str.charAt(0);
    $(chars).wrap("<span style='color: lime;'></span>");
   })
});

4 个答案:

答案 0 :(得分:2)

尝试这个:

$(document).ready(function () {

    var span = $('.article-table-descriptions > span');

    span.each(function(index, el){
    
       var span_html =  $(el).html();

       $(el).html("<span style='color: lime;'>"+ span_html.charAt(0)  +"</span>" + span_html.substring(1,span_html.length));

    });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="article-table-descriptions" style="width: 100%;">
    <span id="tblfn4">*footer text.</span>
    <span id="tblfn5">†footer text.</span>
</div>
<div class="article-table-descriptions" style="width: 100%;">
    <span id="tblfn6">*footer text.</span>
    <span id="tblfn7">†footer text.</span>
</div>

<div class="article-table-descriptions" style="width: 100%;">
    <span id="tblfn8">*footer text.</span>
    <span id="tblfn9">†footer text.</span>
</div>

答案 1 :(得分:0)

首先获取所有适当的span元素,然后再尝试获取第一个字符。然后遍历跨度,获取第一个字符并获取字符串减第一个字符,包装第一个字符,然后更新span

$( () => {

  const $spans = $( '.article-table-descriptions > span' );

  $spans.each( ( i, span ) => {
      
    const $span = $( span );
    const str   = $span.text();
    const char  = str.slice( 0, 1 );
    const _str  = str.slice( 1, str.length );

    $span.html( `<span class="highlight--char">${char}</span>${_str}` );
    
  } );
  
} );
.highlight--char {
  margin-right: 0.5rem;
  color: lime;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="article-table-descriptions" style="width: 100%;">
    <span id="tblfn4">*footer text 1a.</span>
    <span id="tblfn5">†footer text 1b.</span>
</div>

<div class="article-table-descriptions" style="width: 100%;">
    <span id="tblfn4">*footer text 2a.</span>
    <span id="tblfn5">†footer text 2b.</span>
</div>

答案 2 :(得分:0)

没有jQuery ,您可以执行类似的操作

let tableFooterSpans = document.querySelectorAll('.article-table-descriptions > span');

tableFooterSpans.forEach(e => e.innerHTML = e.innerHTML.replace(/(†|\*)?/g,"<span style='color: lime;margin-right:5px'>$1</span>"));
<div class="article-table-descriptions">
  <span>†text1</span> <span>*text2</span>
</div>

答案 3 :(得分:0)

您可以尝试使用类似的方法来代替usig wrap()

$(document).ready(function () {

let chars;
let tableFooterSpans = $('.article-table-descriptions').find('span').text().split('.');

console.log("1",tableFooterSpans);

$(tableFooterSpans).each(function(i, str){
    chars = str.charAt(0);
    console.log("2", chars);
    $("#test").append("<span style='color : yellow'>"+chars+"</span>");
   })

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="article-table-descriptions" style="width: 100%;">
    <span id="tblfn4">*footer text.</span>
    <span id="tblfn5">†footer text.</span>
</div>

<div id="test">test</div>