如何解析onmousemove事件字符串中的Unicode与换行并格式化显示

我明白你想要实现的效果：从图片的onmousemove事件中提取提示文本，处理其中的换行符和Unicode转义字符，最终分成两段用<em>标签包裹显示。咱们一步步来调整你的代码：

问题分析 #

你当前的代码已经能提取到tooltip文本，但没处理以下核心需求：

• 没有将\r\n分割成独立的段落
• 没有把\u00EB这类Unicode转义序列转换成实际的字符（比如ë）

改进后的代码 #

$(document).ready(function() {
    $('td > img').each(function() {
        var $img = $(this);
        // 精准提取showInfo函数里的文本参数
        var toolTipMatch = $img.attr('onmousemove').match(/showInfo\(event,'(.*?)'\);/);
        if (!toolTipMatch) return; // 匹配失败时跳过，避免报错
        
        var rawText = toolTipMatch[1];
        // 解码Unicode转义字符+处理转义序列（JSON.parse能自动识别这类转义）
        var decodedText = JSON.parse('"' + rawText.replace(/"/g, '\\"') + '"');
        // 按换行分割文本，同时过滤空行
        var textSegments = decodedText.split(/\r?\n/).filter(segment => segment.trim() !== '');
        
        // 生成目标HTML结构：每个段落用<em>包裹
        var infoHtml = '<td><b>Info:</b><br>';
        textSegments.forEach(segment => {
            infoHtml += `<em>${segment.trim()}</em><br>`;
        });
        infoHtml += '</td>';
        
        // 调整样式与DOM布局
        $("div.timelineRow").css("padding", "7px");
        $(infoHtml).insertAfter($img.parent());
        $img.insertAfter($img.parent());
    });
});

关键改动说明 #

• 精准文本提取：用showInfo\(event,'(.*?)'\);正则直接匹配showInfo函数的文本参数，比通用单引号匹配更稳妥，避免意外捕获无关内容。
• 转义字符解码：借助JSON.parse自动处理Unicode转义（比如\u00EB转成ë），同时也能识别\n这类普通转义符。
• 段落格式化：把解码后的文本按换行分割，过滤空行后给每个段落套上<em>标签，用<br>实现换行显示，完全贴合你期望的效果。
• 代码健壮性：增加匹配失败的判断逻辑，避免因元素属性格式异常导致页面报错。

效果验证 #

针对你提供的HTML：

<img onmousemove="showInfo(event,'This string needs to be filtered. \r\n There is also unicode in this string: \u00EB.');" onmouseout="hideInfo();" />

最终插入的HTML内容会是：

<td><b>Info:</b><br>
<em>This string needs to be filtered.</em><br>
<em>There is also unicode in this string: ë</em><br>
</td>

完全符合你想要的显示效果。

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