js或jq取得和重写多个元素下的值

Question

高手好，有如下一段html结构

<ul id="news">
    <li>新闻列表111<span class="time">2018-10-21</span></li>
    <li>新闻列表111<span class="time">2018-09-03</span></li>
</ul>

我想实现用js或jq取出并改变每个span里面的html，把："年份-月份-日期"中的“日期”用strong便签包裹起来(顺便删除前面“-”)，这样得到如下html结构，我就可以用css控制这个strong做点样式：

<ul id="news">
    <li>新闻列表111<span class="time">2018-10<strong>21</strong></span></li>
    <li>新闻列表111<span class="time">2018-09<strong>03</strong></span></li>
</ul>

我在网上找了一个函数能重新替换指定位置的字符(不知出处，感谢原作者)：

//replacePos(传入字符串参数, 替换第几位字符, "替换内容");
function replacePos(strObj, pos, replacetext) {
    var str = strObj.substr(0, pos-1) + replacetext + strObj.substring(pos, strObj.length);
    return str;
}

我自己写了个for循环取得了每个span下的值，并用上面那个函数得到了我想要的新值n

function picnewsTime() {
    var obj = $(".time");//JQ取得所有class为time的标签句柄

    for(var i = 0; i < obj.length ; i++) {
        var txt = obj[i].textContent || obj[i].innerText;//取得循环前标签内的值
        //上一行的JQ方法var txt = $(this).text();

        var newhtml = replacePos(txt, 8, "<strong>");//调用replacePos()函数把日期前面那一横换成了strong
        newhtml += "</strong>";//在后面又追加一个结束标签
        alert(newhtml);
    }
}
picnewsTime();

我试图把新得到的newhtml值重新写入span的时候失败了，只能把全部日期都改成一个值，搜索了几个小时，好像得到正确的效果要用到闭包，js小白一枚，确实搞不定了，请各位高手帮帮忙看看该怎么写，谢谢！

或许我思路都是错的，不按我这个思路有更好的方法也行，最好能连那个class="time"都省略，前提是只能js、jq在前端修改，后台那边传的日期动不了。

------补充：------

我已经弄成了onclick能得到正确结果了，但是如何把下面这段js改成页面加载就执行，而不需要onclick这个步骤

function picnewsTime() {
    var obj = $(".time");//JQ取得所有class为time的标签句柄
    for(var i = 0; i < obj.length; i++) {
          (function(arg){     
            obj[arg].onclick = function() {
            var txt = obj[arg].textContent || obj[arg].innerText;//取得当前span日期值放入txt，innerText是ie的写法，textContent是ff、ch等
            //上一行也可直接用JQ的方法var txt = $(this).text();
            var newhtml = replacePos(txt, 8, "<strong>");
            newhtml += "</strong>";
            alert(newhtml);
            $(this).html(newhtml);
            }
          })(i);//传参
    }
}
picnewsTime();

Answer 1

const spans=document.querySelectorAll('#news>li>span');
    spans.forEach(function(item){
        item.innerHTML=item.innerHTML.replace(/(\d+)$/,'<strong>$1</strong>');
    });

Answer 2

整个思路都是错的，拿到后台的数据处理成2018-10<strong>21</strong>再渲染到页面