react：渲染HTML

方法一：react 的 dangerouslySetInnerHTML 属性实现。

export default () => {
  const content = '这是一段需要<span class="highlight" style="background-color: gold;">高亮</span>显示的文本。'；
  return <span dangerouslySetInnerHTML={{ __html: content }} />
}

方法二：DOM 元素的 innerHTML 属性

import React, { useRef } from 'react';

export default () => {
	const textRef = useRef(undefined);
	const content = '这是一段需要<span class="highlight" style="background-color: gold;">高亮</span>显示的文本。'；
	....
	text.current.innerHTML = content;
	
	return <div ref={textRef}>{text}</div>
}
 

前端显示效果：

如果是带滚动条的大段文字，可能还需要将高亮部分滚动到视窗中心：

const highlightElement = document.getElementById('highlight');
if (highlightElement) {
  const highlightRect = highlightElement.getBoundingClientRect();		// 获取highlightElement的边界信息（包括其位置和尺寸）
  const viewportTop = window.pageYOffset || document.documentElement.scrollTop;		// 获取当前视窗的顶部位置。window.pageYOffset是垂直滚动的量，而document.documentElement.scrollTop是视窗顶部到文档顶部的距离
  const viewportBottom = viewportTop + window.innerHeight;				// 获取当前视窗的底部位置。通过将视窗的顶部位置加上视窗的高度来实现
  const highlightTop = highlightRect.top + viewportTop;					// 计算highlightElement的顶部位置相对于视窗的位置
  const highlightBottom = highlightTop + highlightRect.height;			// 计算highlightElement的底部位置相对于视窗的位置
  if (highlightBottom > viewportBottom || highlightTop < viewportTop) {
    highlightElement.scrollIntoView({ behavior: 'smooth', block: 'center' });		// 检查highlightElement是否在视窗的可见范围内，如果不在，使用scrollIntoView方法将其滚动到视窗的中心。这里使用了'smooth'行为，这意味着滚动动作会平滑进行
  }
}