Short message variable replacement method based on dynamic template editing

Abstract

The invention relates to the field of variable replacement, and discloses a short message variable replacement method based on dynamic template editing, which comprises the following steps of: changing a region into an editable state by using a contentEdible attribute of an HTML (Hypertext Markup Language), and presetting a variable label style in an editing region; a configuration person inserts a variable by clicking a variable tag on an interface, dynamically creates a virtual node by using a creature DocumentFragment method of a DOM (Document Object Model), and inserts the corresponding variable tag into a position where a cursor is located in a special style; when a user clicks or inserts the variable label, using window.getSelection to obtain the position of a cursor in real time; after finishing editing, the configuration personnel click a saving button; the system replaces variable labels in a template with actual content according to a stored variable mapping relation through a template text extracted through code analysis in the background, and the replaced complete short message content is transmitted to a short message service module and is ready to be sent to a target user. The method has the advantage of improving the overall working efficiency and accuracy.

Description

Technical Field

[0001] The invention relates to the field of variable replacement, and in particular to a method for replacing short message variables based on dynamic template editing. Background Art

[0002] In modern mediation systems, the implementation of batch SMS notification functions relies on dynamic template editing and variable replacement. With the continuous development of business needs, the complexity of SMS content is increasing, especially when it involves information from multiple parties, such as the flexible combination and change of variables such as plaintiffs, defendants, case numbers, dates, etc. Traditional solutions often rely on manual matching of variables and codes, and SMS generation through server-side storage and front-end input box inserting variable codes. Whenever a new SMS template needs to be updated or created, the configuration personnel must check and select the appropriate variable codes one by one and insert them into the template. This manual matching process is not only time-consuming and labor-intensive, but also prone to errors, especially when dealing with multiple variables or complex logic. When the number of variables increases, template management becomes more difficult, and configuration personnel often need to frequently switch between different codes and variables to ensure that each variable matches the corresponding code. As business needs change, new variables are constantly added, and the association between variables becomes more complex. The efficiency and accuracy of traditional methods in such complex situations are difficult to guarantee. Due to the lack of intuitive visualization tools, it is difficult for configuration personnel to quickly identify errors or omissions, resulting in the final generated SMS content may contain incorrect variable values, thereby affecting the accuracy of information transmission and the smooth progress of business processes. Therefore, it is necessary to design a more efficient and intuitive SMS variable replacement method based on dynamic template editing. Summary of the invention

[0003] 1. Technical issues to be resolved

[0004] In view of the deficiencies in the prior art, the present invention provides a method for replacing SMS variables based on dynamic template editing, which has the advantages of improving overall work efficiency and accuracy and solves the problems in the above-mentioned background technology.

[0005] (II) Technical solution

[0006] In order to achieve the above-mentioned purpose of improving overall work efficiency and accuracy, the present invention provides the following technical solution: a method for replacing SMS variables based on dynamic template editing, comprising the following steps:

[0007] S1: Use the contentEditable attribute of HTML to make the area editable. In the editing area, preset the variable label style.

[0008] Preferably, the S1 further includes allowing the user to dynamically edit text and HTML structure in the browser, combining JavaScript to control the cursor position, selection range, and insert or delete content in real time, setting special styles for variable tags through CSS to distinguish them from ordinary text, and using DOM operation technology. When the user triggers a specific event and clicks a customized "Insert" button, JavaScript can use document.createElement() to create a new text node or HTML element node based on the acquired cursor position, and then insert it into the specified position in the DOM tree through the insertBefore() or appendChild() method. The deletion operation can be implemented for the selected content by obtaining its corresponding DOM element and calling the remove() method.

[0009] S2: The configuration personnel insert variables by clicking the variable label on the interface, dynamically create virtual nodes using the createDocumentFragment method of DOM, and insert the corresponding variable label in a special style into the cursor position.

[0010] Preferably, S2 further includes the configuration personnel inserting variables by clicking on the variable label on the interface, and using the DOM's createDocumentFragment method to create a lightweight virtual node. The node includes the variable label and necessary DOM elements, but has not yet been inserted into the actual DOM until the operation is completed. During the insertion process, the variable label will be assigned a special CSS style, and the cursor position will be obtained in real time through window.getSelection().

[0011] S3: When the user clicks or inserts a variable label, use window.getSelection to get the cursor position in real time and record the position.

[0012] Preferably, S3 further includes using the window.getSelection() method to obtain the cursor position in real time when the user clicks or inserts a variable label, window.getSelection() returns a Selection object representing the current selection, accesses the anchorNode and focusNode of the object, combines selectionStart and selectionEnd, records the position, inserts the variable label at this position, and uses the range object to further operate the selection or insert the node.

[0013] S4: After the configuration personnel completes the editing, click the Save button, and the system will extract the DOM structure in the editable area.

[0014] Preferably, S4 further includes that after the configuration personnel completes editing, they click a save button to extract the DOM structure in the editable area, obtain the DOM element of the editable area through document.getElementById() or document.querySelector(), and use the innerHTML or textContent attribute to extract the HTML content or text content of the area to obtain all the text entered by the user and the embedded variable tags.

[0015] S5: The system extracts the template text through code parsing in the background, and replaces the variable labels in the template with actual content according to the stored variable mapping relationship. The complete SMS content after replacement will be transmitted to the SMS service module and prepared to be sent to the target user.

[0016] Preferably, S5 further includes, in the system background, after parsing the extracted template text, replacing the variable labels in the template with actual content using a predefined variable mapping relationship, scanning all placeholders in the text through regular matching or a template engine, and replacing them according to the variable mapping relationship. After the replacement is completed, the generated complete SMS content will be passed to the SMS service module, and the text will be sent to the designated SMS service provider using an API call or a message queue, ready to be sent to the target user.

[0017] Preferably, the system further performs format verification on the variable labels in the background. During the template parsing stage, the system checks whether the syntax and structure of each variable label are correct. If an abnormal label is found, the system prompts the configuration personnel to make corrections.

[0018] Preferably, the operations of S2 and S3 further include supporting configuration personnel to insert multiple variable tags in the template, and supporting editing and modifying the insertion order of variable tags through undo and redo operations, and all modification operations are responded to in real time through JavaScript on the browser side.

[0019] (III) Beneficial effects

[0020] Compared with the prior art, the present invention provides a method for replacing SMS variables based on dynamic template editing, which has the following beneficial effects:

[0021] The present invention adopts dynamic template editing technology, through the front-end contentEditable attribute and virtual node insertion, so that the configuration personnel can intuitively insert variable tags in the editing interface and mark them with special styles. Whenever the configuration personnel submit the template, the system automatically extracts the text node and replaces the variable with the corresponding actual value, realizing the "what you see is what you get" editing experience, greatly simplifying the variable management process and reducing the risk of errors. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] Figure 1 Schematic diagram of the method of the present invention. DETAILED DESCRIPTION

[0023] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0024] The present invention provides a technical solution: a method for replacing SMS variables based on dynamic template editing, comprising the following steps:

[0025] S1: Use the contentEditable attribute of HTML to make the area editable. In the editing area, preset the variable label style.

[0026] Use the contentEditable attribute of HTML to set an element to an editable state, so that the area can directly accept user input and dynamically update the content. This attribute allows text and HTML structures to be modified instantly in the browser without other operations such as form submission. By combining JavaScript, you can obtain and manipulate the content of the editing area, dynamically control the cursor position, selection range, and insert or delete content. In terms of inserting and deleting content, using DOM operation technology, when the user triggers a specific event, such as clicking a custom "Insert" button, JavaScript can use document.createElement() to create a new text node or HTML element node based on the obtained cursor position, and then insert it into the specified position in the DOM tree through the insertBefore() or appendChild() method. The deletion operation can be implemented for the selected content by obtaining its corresponding DOM element and calling the remove() method. To further optimize the user experience, set a special style for the variable tag through CSS to make it clearly distinguishable from ordinary text. For example, define a class selector .variable-label, set a unique font style (such as font-family:monospace), eye-catching colors (such as color:#FF0000), and possible background colors (such as background-color:#FFFF00), etc., so that the variable label is clear at a glance on the page, enhancing the readability and maintainability of the content. In addition, the preset variable label style is usually to style specific variable labels (such as #respondent#) through CSS, setting different colors, fonts, backgrounds and borders to distinguish these labels from ordinary text. In this way, the configuration personnel can identify at a glance which are variables and which are ordinary text to avoid misoperation or omission. Combining contentEditable and variable label styles, text editing and variable insertion can be performed in real time, improving the flexibility and intuitiveness of the editing process.

[0027] By using contentEditable and preset variable label styles, the editing area shows significant interactivity and flexibility, allowing users to obtain intuitive and immediate feedback during the editing process. Users can modify text content and insert variables at any time with simple clicks or keyboard operations, and the system will reflect the editing results in real time, in line with the "what you see is what you get" editing experience. The highlighted display effect of the variable label allows the configuration personnel to clearly see the difference between the variable and the text, avoiding incorrect label insertion or modification. With the increase in the number of variables and the complexity of the template, this method effectively improves the editing efficiency, especially when involving a large number of variables and multiple templates. Users no longer need to manually remember or find the mapping relationship of the variables, and the entire editing process becomes more concise, visual and efficient. In addition, through real-time cursor management and DOM operations, the system can accurately insert variables into the predetermined position, ensuring that the structure and logic of the template are retained, and the final generated SMS content has higher accuracy and consistency.

[0028] S2: The configuration personnel insert variables by clicking the variable label on the interface, dynamically create virtual nodes using the createDocumentFragment method of DOM, and insert the corresponding variable label in a special style into the cursor position.

[0029] The configurator inserts the variable by clicking the variable tag on the interface, and dynamically creates a virtual node using the DOM's createDocumentFragment method. This method allows a lightweight "document fragment" to be created in the document, which contains the variable tag and other necessary DOM elements, but has not yet been inserted into the actual DOM tree of the page until the operation is completed. In this way, the performance loss caused by frequent operations on the actual DOM can be avoided. createDocumentFragment makes the insertion process more efficient and flexible. During the insertion process, the variable tag will be given a special CSS style, such as color, background color or font style, to distinguish it from other ordinary text. When the configurator clicks on a variable tag, the system will obtain the current cursor position through window.getSelection() and ensure that the variable tag is accurately inserted at that position, ensuring the compatibility of the variable insertion process with the document content. In addition, the dynamic insertion of virtual nodes allows each edit to be previewed in real time, ensuring the immediacy and consistency of the final result.

[0030] By using createDocumentFragment to dynamically create virtual nodes, the system can avoid directly operating the main DOM tree when inserting variable tags, reducing the overhead of page redrawing and reflow, and improving the system's responsiveness and fluency. Variable tags are displayed in a special style in the editable area, allowing configurators to intuitively identify and operate these tags without being confused with ordinary text, greatly improving the accuracy and efficiency of the editing process. When the configurator clicks on the variable tag, the variable will be inserted precisely at the cursor position, maintaining the logical order and format consistency of the text. In addition, the use of virtual nodes makes the operation more flexible and scalable. Users can modify the style or text content of the variable tag at any time and preview the results in real time to ensure that the template always meets expectations during the editing process. This seamless user experience effectively improves the efficiency of template editing, especially when multiple dynamic variables are involved in the template, the editing process is more efficient and accurate.

[0031] S3: When the user clicks or inserts a variable label, use window.getSelection to get the cursor position in real time and record the position.

[0032] When the user clicks or inserts a variable label, the window.getSelection() method is used to obtain the cursor position in real time. Window.getSelection() returns a Selection object representing the current selection, which contains the cursor position and the selected text range. By accessing the object's properties such as anchorNode and focusNode, developers can accurately obtain the cursor's starting and ending positions, thereby knowing the specific position of the cursor. Combined with selectionStart and selectionEnd, the cursor and selection range can be controlled more finely. After recording the position, the system can insert the variable label at this position without interfering with or destroying the structure of the existing text, ensuring that the variable label is inserted accurately. In addition, the range object can be used to further operate the selection or insert nodes, providing flexible text operation capabilities so that the inserted variable labels are always in line with the user's intentions. Figure 1 To.

[0033] By using window.getSelection() to obtain and record the cursor position in real time, users can accurately control the specific position of variable insertion, avoiding inaccurate insertion during template editing. This technology ensures that the inserted variable tags are not mistakenly placed in the wrong position, ensuring the correctness and consistency of the structure and content of the SMS template. Real-time cursor management brings a smooth user experience, especially when multiple variable tags need to be inserted or complex templates need to be edited. Configuration personnel can quickly locate the insertion point, reducing the chance of manual intervention and erroneous operations. With the help of selectionStart, selectionEnd and range objects, developers can flexibly insert nodes within the cursor or selection range, making the entire template editing process more efficient and intelligent, ensuring that the final generated SMS template conforms to the expected format and logic. The application of this technology not only improves editing efficiency, but also optimizes the interactive experience, making the insertion of text and variable tags more intuitive, accurate and convenient.

[0034] S4: After the configuration personnel completes the editing, click the Save button, and the system will extract the DOM structure in the editable area.

[0035] After the configuration personnel completes the editing, click the Save button, and the system will extract the DOM structure in the editable area. This process relies on the browser's DOM API to obtain the DOM element of the editable area through document.getElementById() or document.querySelector(). Then, use the innerHTML or textContent attributes to extract the HTML content or text content of the area to obtain all the text entered by the user and the embedded variable tags. In this process, the system can process and extract all elements in the contentEditable area, including nested HTML tags, text nodes, and special styles. In order to avoid invalid or redundant HTML tags, the system may further clean and normalize the content through regular expressions or DOM parsing methods to ensure that the obtained text structure is clean and accurate. The extracted DOM content will be used for subsequent processing, such as variable replacement or template storage, and can be transmitted to the server in JSON or other data formats for storage.

[0036] Effectively captures and saves all input content in the editing area, including text, variable tags, and related HTML structures. This technical feature ensures that the content edited by the user can be completely and accurately extracted, avoiding loss or misoperation during the editing process. During the extraction process after clicking the Save button, due to the use of DOMAPI, the operation can obtain the current state of the page in real time and without delay, ensuring that the edited content is consistent with the user's intention. Figure 1In addition, by cleaning and normalizing the extracted content, redundant tags and unnecessary styles can be removed, thus ensuring that the saved template structure is clear and convenient for subsequent variable replacement and storage. This process makes editing more efficient and accurate, ensuring that after editing is completed, the system can accurately capture and save all information entered by the user, providing a reliable foundation for subsequent SMS sending and template management.

[0037] S5: The system extracts the template text through code parsing in the background, and replaces the variable labels in the template with actual content according to the stored variable mapping relationship. The complete SMS content after replacement will be transmitted to the SMS service module and prepared to be sent to the target user.

[0038] In the background of the system, after parsing the extracted template text, the variable tags in the template (such as #respondent#, #caseId#, etc.) are replaced with actual content using the predefined variable mapping relationship. This process relies on string processing and regular expression technology. The system first scans all placeholders in the text through regular matching or template engine, and replaces them according to the variable mapping relationship. The mapping relationship is usually stored in the database or memory in the form of key-value pairs to ensure that each variable tag can be accurately replaced with the corresponding actual data. To ensure the efficiency and accuracy of the replacement process, the system may also verify the format of the variables, such as date, number, etc., to ensure that the replaced text meets the specified format requirements. After the replacement is completed, the generated complete SMS content will be passed to the SMS service module, and the text will be sent to the designated SMS service provider using API calls or message queues, ready to be sent to the target user.

[0039] This technical process ensures that the template content defined by the user can be flexibly and accurately converted into personalized SMS content, significantly improving the efficiency and customization level of SMS batch sending. Through the dynamic replacement of variable tags, the system can generate personalized messages according to the needs of different users, enhancing the pertinence and effectiveness of SMS notifications. Regular matching and format verification during the replacement process ensure that the replaced content is not only correct, but also conforms to the expected format and specifications, avoiding the situation where the text is confusing or unrecognizable due to format errors. At the same time, through seamless docking with the SMS service module, the generated SMS content can be quickly and accurately transmitted to the SMS platform, ensuring that the message can be sent to the target user in a timely and accurate manner. The application of this technology not only improves the personalization and accuracy of SMS sending, but also optimizes the response speed and stability of the overall system, improves the user experience and reduces the need for manual intervention.

[0040] It should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device.

[0041] Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present invention, and that the scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. A method for replacing SMS variables based on dynamic template editing, characterized in that: The following steps are involved: S1: Use the contentEditable attribute of HTML to make the area editable. In the editing area, preset the variable label style; S2: The configuration personnel inserts variables by clicking the variable label on the interface, dynamically creates a virtual node using the createDocumentFragment method of DOM, and inserts the corresponding variable label in a special style at the cursor position; S3: When the user clicks or inserts a variable label, use window.getSelection to get the cursor position in real time and record the position; S4: After the configuration personnel completes the editing, they click the Save button, and the system extracts the DOM structure in the editable area; S5: The system extracts the template text through code parsing in the background, and replaces the variable labels in the template with actual content according to the stored variable mapping relationship. The complete SMS content after replacement will be transmitted to the SMS service module and prepared to be sent to the target user.

2. According to claim 1, a method for replacing SMS variables based on dynamic template editing is characterized in that: The system further performs format verification on variable labels in the background. During the template parsing stage, the system checks whether the syntax and structure of each variable label are correct. If an abnormal label is found, the system prompts the configuration personnel to make corrections.

3. A method for replacing SMS variables based on dynamic template editing according to claim 1, characterized in that: The S1 further includes allowing users to dynamically edit text and HTML structures in the browser, combining JavaScript to control the cursor position, selection range, and insert or delete content in real time, setting special styles for variable tags through CSS to distinguish them from ordinary text, and using DOM operation technology. When the user triggers a specific event and clicks a customized "Insert" button, JavaScript can use document.createElement() to create a new text node or HTML element node based on the acquired cursor position, and then insert it into the specified position in the DOM tree through the insertBefore() or appendChild() method. The deletion operation can be implemented for the selected content by obtaining its corresponding DOM element and calling the remove() method.

4. The method for replacing SMS variables based on dynamic template editing according to claim 1, characterized in that: The S2 further includes a configuration personnel inserting variables by clicking on a variable label on the interface, and using the DOM's createDocumentFragment method to create a lightweight virtual node. The node includes a variable label and necessary DOM elements, but has not yet been inserted into the actual DOM. It will not be inserted until the operation is completed. During the insertion process, the variable label will be given a special CSS style, and the cursor position will be obtained in real time through window.getSelection().

5. The method for replacing SMS variables based on dynamic template editing according to claim 1, characterized in that: The S3 further includes using the window.getSelection() method to obtain the cursor position in real time when the user clicks or inserts a variable label, and window.getSelection() returns a Selection object representing the current selection. By accessing the anchorNode and focusNode of the object, combined with selectionStart and selectionEnd, the position is recorded, and the variable label is inserted at this position. Using the range object, the selection is further operated or the node is inserted.

6. A method for replacing SMS variables based on dynamic template editing according to claim 1, characterized in that: The S4 further includes that after the configuration personnel completes editing, they click the Save button, extract the DOM structure in the editable area, obtain the DOM element of the editable area through document.getElementById() or document.querySelector(), use the innerHTML or textContent attribute to extract the HTML content or text content of the area, and obtain all the text entered by the user and the embedded variable tags.

7. A method for replacing SMS variables based on dynamic template editing according to claim 1, characterized in that ,The S5 further includes parsing the extracted template text in the system background, ,using the predefined variable mapping relationship to replace the variable ,labels in the template with the actual content, scanning all the placeholders in the text through regular ,matching or template engine, and replacing them according to the variable mapping relationship.,After the replacement is completed, the generated complete SMS content will be passed to the SMS ,service module, and the text will be sent to the designated SMS service ,service module by using API calls or message queues, ready to send to the target ,user.

8. The method for replacing SMS variables based on dynamic template editing according to claim 1, characterized in that ,The operations of S2 and S3 further include supporting the ,configuration personnel to insert multiple variable tags in the template, and supporting editing and ,modifying the insertion order of variable tags through undo and redo operations, and all ,modification operations are responded in real time through JavaScript on the browser side.

Images