基于数组匹配值为字符串指定部分设置背景色（Vue/JS）

Hey there! Let's figure out how to add background colors to specific parts of a string or input field in your Vue project—you’re right that the core logic will be vanilla JavaScript, and we’ll tie it into Vue’s computed properties for reactivity.

First, let’s break down the core idea: we’ll take your target string, split it into segments, wrap the parts you want to highlight in a styled <span>, then render that processed HTML safely in Vue. Since you mentioned a JSON structure defines which parts to highlight, we’ll build the logic around that.

Step-by-Step Implementation #

1. Set Up Your Highlight Rules (From JSON) #

Let’s assume your JSON (like the one in your screenshot) looks something like this—defining the base string and the start/end indices of the parts to highlight:

// Example JSON structure matching your context
const highlightSettings = {
  sourceString: "The quick brown fox jumps over the lazy dog",
  highlightAreas: [
    { start: 4, end: 9 }, // Targets "quick"
    { start: 10, end: 15 } // Targets "brown"
  ]
};

2. Vue Component Code #

Here’s a complete Vue component that uses computed properties and a helper method to handle the highlighting:

<template>
  <div class="highlight-container">
    <!-- For static string display (like your JSON-based content) -->
    <div v-html="highlightedStaticText" class="text-display"></div>

    <!-- For input field (real-time highlighting as the user types) -->
    <label>Type something:</label>
    <input 
      v-model="userInput" 
      @input="updateHighlightedInput"
      class="user-input"
    />
    <!-- Preview of the highlighted input content (since native inputs don't support partial backgrounds) -->
    <div v-html="highlightedInputPreview" class="input-preview"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInput: "",
      highlightedInputPreview: "",
      // Pull your actual settings from your JSON here
      highlightSettings: {
        sourceString: "The quick brown fox jumps over the lazy dog",
        highlightAreas: [
          { start: 4, end: 9 },
          { start: 10, end: 15 }
        ]
      }
    };
  },
  computed: {
    highlightedStaticText() {
      // Process the static string from your JSON
      return this.addBackgroundHighlights(
        this.highlightSettings.sourceString,
        this.highlightSettings.highlightAreas
      );
    }
  },
  methods: {
    addBackgroundHighlights(str, highlightAreas) {
      let processedText = "";
      let lastPosition = 0;

      // First sort the highlight areas by start index to avoid overlap issues
      const sortedAreas = [...highlightAreas].sort((a, b) => a.start - b.start);

      sortedAreas.forEach(area => {
        // Add the unhighlighted part before the current target
        if (area.start > lastPosition) {
          processedText += str.slice(lastPosition, area.start);
        }
        // Wrap the target segment in a span with your desired background color
        processedText += `<span style="background-color: #ffeb3b; padding: 2px 4px; border-radius: 3px;">${str.slice(area.start, area.end)}</span>`;
        lastPosition = area.end;
      });

      // Add any remaining part of the string after the last highlight
      if (lastPosition < str.length) {
        processedText += str.slice(lastPosition);
      }

      return processedText;
    },
    updateHighlightedInput() {
      // Update the preview whenever the user types in the input
      this.highlightedInputPreview = this.addBackgroundHighlights(
        this.userInput,
        this.highlightSettings.highlightAreas
      );
    }
  }
};
</script>

<style scoped>
.highlight-container {
  padding: 20px;
  max-width: 600px;
}
.text-display {
  font-size: 18px;
  margin-bottom: 20px;
}
.user-input {
  width: 100%;
  padding: 8px;
  margin: 10px 0;
}
.input-preview {
  padding: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #f9f9f9;
}
</style>

3. Important Things to Note #

• Using v-html: Since we’re rendering raw HTML, make sure your source string is trusted (no unfiltered user input) to avoid XSS vulnerabilities. If you need to handle user-generated content, add a sanitization step first!
• Input Field Limitation: Native HTML input fields don’t support partial background coloring directly (only full-text or selected text styles). That’s why we use a preview div to show the highlighted version of the input content—this is the standard workaround for this use case.
• Overlapping Highlights: The helper method sorts the highlight areas by their start index to handle overlaps cleanly. If your JSON has overlapping ranges, you can add extra logic to merge them if needed.

Matching Your Expected Outcome #

As shown in your desired effect screenshot (where arrows point to the word blocks needing background color), the addBackgroundHighlights method will wrap those exact segments in the styled span, giving you the highlighted look you’re aiming for.

内容的提问来源于stack exchange，提问作者Terje Nygård