寻求可实现文本转#标签及多标签功能的问答表单组件库或示例

Hey there! Let me break down some practical, open-source tools and code snippets to tackle your two project requirements—they’re totally doable with existing libraries or even a bit of custom code.

1. Converting Input Text to #Tag Format #

First off, turning plain text into hashtag-style tags doesn’t always need a heavy library. Here are a couple approaches:

Custom JavaScript Function (Lightweight) #

If you want to keep it simple without dependencies, you can write a small function to clean and format your input:

function convertToHashtags(inputText) {
  // Split text by spaces, filter out empty strings, clean special characters
  return inputText.split(' ')
    .filter(word => word.trim() !== '')
    .map(word => {
      // Remove non-alphanumeric characters (adjust regex as needed)
      const cleanWord = word.replace(/[^a-zA-Z0-9_]/g, '');
      return `#${cleanWord}`;
    })
    .join(' ');
}

// Example usage:
const input = "node.js web development";
console.log(convertToHashtags(input)); // Output: "#nodejs #web #development"

Using Utility Libraries #

If you want to handle edge cases (like accented characters, proper casing), these small libraries can help:

• lodash: Use kebabCase or camelCase to standardize tag names before adding the # symbol. Example: #${_.kebabCase(word)}
• string-strip-html: Clean any accidental HTML from input text before processing into tags.

2. Multi-Tag Form Component (Like the Blue Node.js Tag) #

For the interactive multi-tag input with styled tags, these open-source libraries are perfect—they handle the UI interactions (adding/removing tags) and are easy to style to match your blue tag example:

Tagify #

Tagify is a lightweight, vanilla JS library that turns any input/textarea into a tag input field. It’s highly customizable and works with no framework dependencies.

• Key features: Auto-complete support, tag validation, keyboard shortcuts (enter/space to add tags), click-to-delete tags.
• Styling tip: To match the blue node.js tag look, override the default CSS:

.tagify__tag {
  background-color: #165DFF; /* Your desired blue */
  color: white;
  border-radius: 4px;
  padding: 4px 8px;
  margin: 2px;
}

.tagify__tag__removeBtn {
  color: white;
  opacity: 0.8;
}

• Basic initialization:

import Tagify from '@yaireo/tagify';

const input = document.querySelector('#tag-input');
new Tagify(input);

React-Tagsinput (For React Projects) #

If you’re building with React, this library is a go-to for multi-tag inputs. It’s flexible and integrates seamlessly with React state.

• Features: Custom tag components, input validation, onChange handlers to track tag state.
• You can style the tags using CSS modules or inline styles to get that blue rounded look.

Bootstrap Tags Input (For Bootstrap Projects) #

If you’re using Bootstrap in your project, this plugin hooks into Bootstrap’s styling to create tag inputs. You can easily tweak the Bootstrap variables to set a blue background for tags.

Final Notes #

All these tools are open-source, well-maintained, and have detailed docs to help you get up and running quickly. If you’re working with a specific framework (React, Vue, etc.), let me know and I can point you to framework-specific alternatives!

内容的提问来源于stack exchange，提问作者Alexander 'Pantastic' Asmußen