如何拆分span标签？编辑器内拆分span标签的实现方法求助

Let me walk you through exactly how to get the split result you want—your initial bold button attempt didn’t work because that tool is for adding text formatting, not breaking apart existing HTML elements. Here’s what to do, depending on whether you’re using your editor’s visual interface or editing directly in code:

Option 1: Using the Visual Editor (e.g., CKEditor, TinyMCE) #

• Start by selecting the "456" portion just like you did in your first step.
• Cut the selected text (press Ctrl+X on Windows/Linux, Cmd+X on Mac). This leaves you with <span>123789</span> in the editor.
• Place your cursor right between "123" and "789", then paste the "456" back (Ctrl+V/Cmd+V).
• Now select "123", then find the option to wrap it in a span (look for a "Wrap in Element" button or check the right-click menu for this option). Repeat this step to wrap "789" in a second span.
• If your editor has a "Split Element" feature, you can also place your cursor right after "123" and use this tool to break the original span into two, then adjust the content to insert "456" in the middle.

Option 2: Editing Directly in Code View (Most Reliable) #

This method skips editor quirks and gives you full control over the HTML structure:

• Switch your editor to Code View or Source Mode (look for a button labeled </> or "Source" in the toolbar).
• Locate your original code line:

  <span>123456789</span>
  

• Manually modify it to match your desired split:

  <span>123</span>456<span>789</span>
  

• Toggle back to the visual editor to confirm the result matches your expected output.

Why the Bold Button Didn’t Work #

The bold button wraps selected text in <strong> or <b> tags for visual formatting—it doesn’t split or alter the existing <span> element. That’s why it couldn’t produce the split structure you were aiming for.

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