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

Question

我无法控制此项目中的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>");
   })
});

Answer 1

试试这个：

 $(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> 

Answer 2

在尝试获取第一个字符之前，首先获取所有适当的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> 

Answer 3

没有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> 

Answer 4

您可以尝试这样的事情，而不是使用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>